<script setup lang="ts">
import { ref, computed } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const searchQuery = ref('');
const currentCategory = ref('all');

const categories = [
    { id: 'all', name: '全部' },
    { id: 'company', name: '公司动态' },
    { id: 'industry', name: '行业资讯' },
    { id: 'technology', name: '技术创新' }
];

const newsItems = ref([
    {
        id: 1,
        category: 'company',
        title: '公司荣获行业创新奖',
        date: '2024-01-15',
        image: '/images/news1.svg',
        summary: '我司凭借创新技术和优质服务，荣获2024年度行业创新奖...'
    },
    {
        id: 2,
        category: 'technology',
        title: '新产品发布会圆满成功',
        date: '2024-01-10',
        image: '/images/news2.svg',
        summary: '在本次发布会，我们向业界展示了最新的技术成果...'
    },
    {
        id: 3,
        category: 'industry',
        title: 'AI技术引领行业变革',
        date: '2024-01-05',
        image: '/images/news3.svg',
        summary:
            '人工智能技术正在改变企业的运营方式。从客户服务到生产管理，AI技术的应用范围不断扩大...'
    }
]);

const filteredNews = computed(() => {
    return newsItems.value.filter((item) => {
        const matchesCategory =
            currentCategory.value === 'all' || item.category === currentCategory.value;
        const matchesSearch =
            item.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
            item.summary.toLowerCase().includes(searchQuery.value.toLowerCase());
        return matchesCategory && matchesSearch;
    });
});

const goToNewsDetail = (newsId: number) => {
    router.push(`/news/${newsId}`);
};
</script>

<template>
    <div class="news-container">
        <el-page-header content="新闻中心" />

        <div class="news-filters">
            <el-input
                v-model="searchQuery"
                placeholder="搜索新闻"
                :prefix-icon="Search"
                clearable
                class="search-input"
            />

            <el-radio-group v-model="currentCategory" class="category-filter">
                <el-radio-button
                    v-for="category in categories"
                    :key="category.id"
                    :label="category.id"
                >
                    {{ category.name }}
                </el-radio-button>
            </el-radio-group>
        </div>

        <el-row :gutter="20" class="news-list">
            <el-col v-for="news in filteredNews" :key="news.id" :xs="24" :sm="12" :md="8" :lg="8">
                <el-card class="news-card" :body-style="{ padding: '0px' }">
                    <img :src="news.image" class="news-image" />
                    <div class="news-content">
                        <h3>{{ news.title }}</h3>
                        <p class="news-summary">{{ news.summary }}</p>
                        <div class="news-footer">
                            <span class="news-date">{{ news.date }}</span>
                            <el-button type="primary" text @click="goToNewsDetail(news.id)"
                                >阅读更多</el-button
                            >
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<style scoped>
.news-container {
    padding: 20px;
}

.news-filters {
    margin: 20px 0;
    display: flex;
    gap: 20px;
    align-items: center;
}

.search-input {
    max-width: 300px;
}

.news-list {
    margin-top: 20px;
}

.news-card {
    margin-bottom: 20px;
    transition: transform 0.3s;
}

.news-card:hover {
    transform: translateY(-5px);
}

.news-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-content {
    padding: 15px;
}

.news-summary {
    color: #666;
    margin: 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.news-date {
    color: #999;
    font-size: 14px;
}
</style>
